<template>
	<view>
		<view class="filter-open" @click="openFilter"><text style="font-size: 32rpx;">筛选</text><u-icon name="arrow-down"
				size="16"></u-icon></view>
		<view class="filter-wrapper" v-show="showFilter" :style="{height: height}">
			<view class="filter-overlay" @click="closeFilter"></view>
			<view class="filter-content">
				<view class="chooseContent">
					<view class="menu" style="padding-top: 70rpx;">
						<view class="filter-header">
							<u-icon class="u-icon-close" @click="closeFilter" name="close"></u-icon>
							<!-- <view class="filter-title">一级分类</view> -->
						</view>
						<!-- 一级分类菜单 -->
						<view v-for="(category, index) in categories" :key="index" class="category"
							:class="{ active: activeCategory === index }" @click="selectCategory(index)">
							{{ category.name }}
						</view>
					</view>
					<view class="sub-category-area">
						<div class="filter-title-content">筛选</div>
						<!-- 二级分类标题 -->
						<view class="sub-category-title" v-if="activeCategory !== null">
							{{ categories[activeCategory].name }}
						</view>
						<!-- 二级分类展示区域 -->
						<view class="sub-category">
							<!-- 二级分类 -->
							<block
								v-for="(subCategory, index) in (categories[activeCategory]?categories[activeCategory].subCategories:[])"
								:key="index">

								<block
									v-if="subCategory.hasOwnProperty('children') || (subCategory.children&&subCategory.children.length>0)">
									<view class="sub-category-title" v-if="activeCategory !== null"
										style="display: block;width: 100%;margin-top: 20px;">
										{{ subCategory.name }}
									</view>
									<view class="sub-category-item"
										v-for="(ch, ind) in subCategory.children?subCategory.children:[]"
										:key="index+'ch'+ind" :class="{ active: isSelectedSubCategory(index,ind) }"
										@click="toggleSubCategory(index,ind)">
										{{ ch.name }}
									</view>
								</block>
								<view class="sub-category-item" v-else :class="{ active: isSelectedSubCategory(index) }"
									@click="toggleSubCategory(index)">
									{{ subCategory.name }}
								</view>
							</block>
						</view>
					</view>
				</view>
				<view class="filter-footer">
					<view class="filter-buttons">
						<view class="filter-reset" @click="resetFilter">重置</view>
						<view class="filter-confirm" @click="confirmFilter">确认</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		props: {
			styles: {
				type: Object,
				default: () => ({})
			},
			height: {
				type: String,
				default: '100%'
			},
			categories: {
				type: Array,
				default: () => ([{
						name: '分类1',
						subCategories: [{
								name: '子分类1-1'
							},
							{
								name: '子分类1-2'
							}
						]
					},
					{
						name: '分类2',
						subCategories: [{
								name: '子分类2-1'
							},
							{
								name: '子分类2-2'
							}
						]
					}
				])
			}
		},
		data() {
			return {
				showFilter: false,
				activeCategory: 0,
				selectedSubCategories: {},
			};
		},
		methods: {
			openFilter() {
				this.showFilter = true;
				this.$emit('openFilter')
				// document.body.style.overflow = 'hidden'; // 禁止页面滚动
			},
			closeFilter() {
				this.showFilter = false;
				this.$emit('closeFilter')
				// document.body.style.overflow = ''; // 恢复页面滚动
			},
			selectCategory(index) {
				if (this.activeCategory === index) {
					this.activeCategory = null;
				} else {
					this.activeCategory = index;
				}
			},
			reset() {
				this.selectedSubCategories = {}
			},
			isSelectedSubCategory(index, ind) {
				let result = false;
				let isInd = ind || ind == 0 ? true : false
				if (isInd) {
					result = this.selectedSubCategories[this.activeCategory] && this.selectedSubCategories[this
						.activeCategory][index] ? this.selectedSubCategories[this.activeCategory][index].includes(
						ind) : false;
				} else {
					result = this.selectedSubCategories[this.activeCategory] ? this.selectedSubCategories[this
						.activeCategory].includes(index) : false;
				}
				return result;
			},
			toggleSubCategory(index, ind) {
				let position = -1;
				let isInd = ind || ind == 0 ? true : false
				if (isInd) {
					position = this.selectedSubCategories[this.activeCategory] && this.selectedSubCategories[this
							.activeCategory][index] ? this.selectedSubCategories[this.activeCategory][index].indexOf(ind) :
						-1;
				} else {
					position = this.selectedSubCategories[this.activeCategory] ? this.selectedSubCategories[this
						.activeCategory].indexOf(index) : -1;
					position = this.selectedSubCategories[this.activeCategory] ? this.selectedSubCategories[this
						.activeCategory].indexOf(index) : -1;
				}
				
				if (position > -1) {
					if (isInd) {
						this.selectedSubCategories[this.activeCategory][index].splice(position, 1);
					} else {
						this.selectedSubCategories[this.activeCategory].splice(position, 1);
					}


				} else {
					if (this.activeCategory !== null) {
						if (isInd) {
							this.selectedSubCategories[this.activeCategory] = {
								...(this.selectedSubCategories[this.activeCategory] || {}),
								[index]: [...(this.selectedSubCategories[this.activeCategory] && this
									.selectedSubCategories[this.activeCategory][index] ? this
									.selectedSubCategories[this.activeCategory][index] : []), ind]
							};
						} else {
							
							if (this.categories[this.activeCategory].isMu) {
								this.selectedSubCategories[this.activeCategory] = [...(this.selectedSubCategories[this
									.activeCategory] || []), index];
							} else {
								this.selectedSubCategories[this.activeCategory] = [index];
							}

						}

						this.$forceUpdate()
					}
				}
				this.$forceUpdate();
			},
			resetFilter() {
				// this.activeCategory = 0;
				this.selectedSubCategories = [];
			},
			confirmFilter() {
				// 处理筛选逻辑
				let data = {};
				for (let k in this.selectedSubCategories) {
					let c = {};

					if (Array.isArray(this.selectedSubCategories[k])) {
						let md = this.selectedSubCategories[k].map(ind => this.categories[k].subCategories[ind] || {});
						if (this.categories[k].isMu) {
							c = md
						} else {
							c = md[0] || {}
						}

						
					} else {
						c = []
						for (let sk in this.selectedSubCategories[k]) {
							// c[sk] = 【=this.selectedSubCategories[k][sk].map(ind => this.categories[k].subCategories[sk].children[ind] || {})
							this.selectedSubCategories[k][sk].forEach(ind => {
								// c = [ ...(c|| []), (this.categories[k].subCategories[sk].children[ind] || {})]

								this.categories[k].subCategories[sk].children[ind] && c.push(this.categories[k]
									.subCategories[sk].children[ind]);
							})
						}
					}
					data = {
						...data,
						[k]: c
					}
				}
				
				let d = data;
				let params = {}
				if (data) {
					for (let k in data) {

						let c = this.categories[k];

						if (c.type == 'split') {
							
							params[c.splitKey] = data[k][c.splitAttr]?data[k][c.splitAttr].split('-')[0] : ''
							params[c.splitKeys] = data[k][c.splitAttr]?data[k][c.splitAttr].split('-')[1] : ''
						} else if (c.type == 'Array') {
							
							params[c.attr] = data[k].map(item => item[c.val]).join()
						} else {
						
							if (c.isMu) {
								params[c.attr] = data[k] ? data[k].map(item => item[c.val]).join() : ''
							} else {
								params[c.attr] = data[k] ? data[k][c.val] : ''
							}

						}
					}
				}
				this.showFilter = true;
				this.$emit('confirm', {
					indexs: this.selectedSubCategories,
					data,
					params
				})
				this.closeFilter()
				// document.body.style.overflow = ''; // 恢复页面滚动
			}
		}
	};
</script>

<style scoped>
	.filter-open {
		border: #f7f7f7;
		display: flex;
		align-items: center;
	}

	.filter-wrapper {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 999;
	}

	.filter-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.filter-content {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: #fff;
		box-shadow: -2rpx 0 10rpx rgba(0, 0, 0, 0.1);
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.chooseContent {
		display: flex;
		width: 100%;
		height: calc(100% - 60px);
	}

	.filter-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: rgba(248, 248, 248, 1);
		padding: 20rpx;
	}

	.close-btn {
		font-size: 40rpx;
		/* cursor: pointer; */
	}

	.filter-title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.menu {
		width: 30%;
		background-color: rgba(248, 248, 248, 1);
		overflow-y: auto;
	}

	.category {
		padding: 25rpx 30rpx;
		/* cursor: pointer; */
		background-color: #fff;
		border: none;
		margin: 10rpx 0;
		/* border-radius: 10rpx; */
		font-size: 27rpx;
	}

	.category.active {
		color: rgba(238, 33, 45, 1);
	}

	.sub-category-area {
		overflow: auto;
		width: 70%;
		height: 100%;
		padding: 20rpx;
		background-color: #fff;
	}

	.sub-category-title {
		font-size: 32rpx;
		margin-bottom: 20rpx;
	}

	.sub-category {
		display: flex;
		flex-wrap: wrap;
		background-color: #fff;
		justify-content: space-between;
	}

	.sub-category-item {
		width: 48%;
		/* margin: 0 2% 4% 2%; */
		margin-bottom: 15rpx;
		padding: 20rpx;
		/* border: 1rpx solid #eee; */
		background-color: rgba(246, 246, 246, 1);
		border-radius: 10rpx;
		font-size: 27rpx;
		/* cursor: pointer; */
	}

	.sub-category-item.active {
		background-color: rgba(255, 247, 248, 1);
		color: rgba(238, 33, 45, 1);
		font-weight: 700;
	}

	.filter-footer {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		/* padding: 20rpx; */
		border-top: 1rpx solid #eee;
	}

	.filter-buttons {
		display: flex;
		margin: 0 auto;
		width: 100%;
	}

	.filter-reset,
	.filter-confirm {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		/* cursor: pointer; */
		width: 100%;
		border: none;
		/* border-radius: 10rpx; */
		padding: 16rpx 32rpx;
		font-size: 32rpx;
		height: 110rpx;
	}

	.filter-reset {
		width: 50%;
		background-color: rgba(250, 250, 250, 1);
		color: rgba(0, 0, 0, 1);
	}

	.filter-confirm {
		background-color: rgba(238, 33, 45, 1);
		color: #fff;
	}

	.filter-title-content {
		font-size: 30rpx;
		font-weight: bold;
		text-align: center;
		margin-bottom: 40rpx;
	}
</style>